比如我们要把一句话追加到页面当中，"hello world"
但是如果我们的字符串里面也有双引号怎么办？
但是，既有双引号，又有单引号怎么办？这时候，我们可以考虑用转义斜杠
1.
2、如何创建对象
比如说，我们再创建一个学生的构造器：
这时候，我们发现，我们刚才创建的其实这里面好多代码和Person是重复的，所以，为了避免浪费，我们可以考虑使用继承，让Stduent构造器继承自Person类：
1.
3、继承
| function Person(name,age){ this.name = name; this.age = age; } Person.prototype.eat = function(){ console.log('吃饭…'); } function Student(name,age,subject){ // this.name = name; // this.age = age; Person.apply(this,[name,age]); this.subject = subject; } Student.prototype = new Person(); var xw = new Student('小王',20); console.log(xw); xw.eat(); |
|---|
1.
4、ES6相关
startsWith
1.
5、函数默认值
如果用户正常传入数字，是没问题的，但是如果用户忘记传值了，比如：
那得到的结果就是NaN,所以，为了避免这个问题，我们可以考虑用默认值：
1.
6、npm复习
| npm init | 初始化npm仓库 |
|---|---|
| npm init -y | 初始化npm仓库(不需要交互式) |
| npm install –save jquery | 本地安装jquery |
| npm install –save jquery@2.3.1 | 本地安装jquery(指定版本) |
| npm uninstall –save jquery | 本地卸载jquery |
| npm install -g gulp-cli | 全局安装gulp-cli |
| npm uninstall -g gulp-cli | 全局卸载gulp-cli |
| npm docs jquery | 查看jquery官方文档 |
| npm info jquery –json | 查看jquery目前为止有哪些版本 |
| npm install -g npm | 升级npm |
| npm install | 根据package.json进行安装 |
| npm i | npm install的简写 |
| npm root 包名-g | 查看包安装的位置 |
| npm doctor | 可以检查你当前npm,node是否配置正常，很有用 |
1.
7、ajax与服务器
ajax的理解：在不刷新页面的情况下，浏览器悄悄地、异步地向服务器发出HTTP请求。服务器收到请求后，传回新的格式化数据回来（通常是JSON）。浏览器解析JSON，通过DOM将新数据呈递显示，页面仅局部刷新。
1.
8、异步的理解
通过一个例子来理解js执行代码的流程(不考虑预解析)
var a = 1;
console.log(a);
var xhr = new XMLHttpRequest();
xhr.open('GET','./a.json');
xhr.onreadystatechange = function(){
if(xhr.status === 200 && xhr.readyState === 4){
console.log(xhr.responseText);
}
}
xhr.send(null);
setTimeout(function(){
console.log('定时器执行');
},200);
var b = 2;
console.log(b);
要想理解这个过程，必须要明白下面几个东西：1、js是单线程的，也就是一次只能执行一件事情
单线程：一个车间，一次只能做一件事情
多进程：有一堆的车间，可以给每个任务分配一个车间执行相应的任务
2、浏览器是多线程(进程)的，有的进程用来渲染css,有的进程用来渲染html,有的进程用来请求ajax,有的进程用来请求页面的图片、js、css等静态文件资源3、event loop用来管理我们的异步的代码的，它会把它们放在一个线程池当中
理解整个流程
1、浏览器加载当前的js文件，主js线程可以从上往下运行
2、执行var a = 1
3、执行console.log(a)
4、创建一个xhr对象，把这个对象的相关操作和onreadystatechange后面的回调函数放到事件循环event loop当中
把定时器和对应的回调函数放到我们的event loop当中
5、event loop会管理我们的异步的任务，当异步任务执行完了（如果是定时器则是定时器到期了）之后，把对应的回调函数放到一个叫回调函数队列当中
6、当主js线程中的代码全部执行完了之后，处于空闲状态，去回调函数队列当中去找有没有任务可以执行，如果有的话就取出来靠最前面的拿出来执行
如何理解event loop
可以把js主线程想像成是老板，event loop想像是秘书
1.
9、http协议相关
1.
10、路由的理解
保安大爷的小本本
1.
11、用php实现一个登录功能
(后面我们会用node.js来实现，所以大家先把这个例子用php代码写一下，理解下原理)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="login.php" method="POST">
<input type="text" name="username" placeholder="用户名">
<br>
<input type="text" name="password" placeholder="密码">
<input type="submit" value="登录">
</form>
</body>
</html>
<?php
header("Content-Type: text/plain; charset=utf-8");
$userInfo = array('name'=>'itcast','password'=>'123456');
if( ($_POST['username'] == $userInfo['name']) && ($_POST['password'] == $userInfo['password']) ){
echo '登录成功';
}else{
echo '登录失败';
}
1.
12、用php实现一个成绩查询的小案例
(后面我们会用node.js来实现，所以大家先把这个例子用php代码写一下，理解下原理)
{
"no123":{
"chinese":"100",
"math":"140",
"english":"149",
"summary":"289"
},
"no124":{
"chinese":"100",
"math":"140",
"english":"140",
"summary":"289"
},
"no125":{
"chinese":"100",
"math":"140",
"english":"139",
"summary":"269"
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="search.php" method="POST">
<input type="text" name="username" placeholder="请输入学号">
<input type="submit" value="查询">
</form>
</body>
</html>
<?php
$data = array("no123"=>array("chinese"=>"100","math"=>"140","english"=>"149","summary"=>"289"),"no124"=>array("chinese"=>"100","math"=>"140","english"=>"149","summary"=>"289"),"no125"=>array("chinese"=>"99","math"=>"138","english"=>"149","summary"=>"289"));
$user = $_POST['username'];
foreach($data as $key=>$value){
if($key === $user){
echo json\_encode($value);
return;
}
}
1.
13、require.js复习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="./require.js"></script>
<script>
require(['./index.js'])//加载模块
</script>
</body>
</html>
//index.js
define(['./a','./b'],function(a,b){
console.log(a);
console.log(b);
});
//a.js
define(function(){
return {
name:'a模块',
fn:function(){
console.log(222);
}
}
});
define(function(){
return {
name:'b模块',
fn:function(){
console.log(444);
}
}
});
关于模块化，虽然我们只学过require.js(其实angular.js当中也是学过的)，我们一定要学会总结规律，所有的模块化库或者框架其实主要由以下几个部分组成的：
如何把模块引入到html文件当中
如何创建一个模块
当前模块如何导出（或者说暴露）出来属性和方法
1.
14、静态页面和动态页面
所谓的静态页面就是写死了，不需要通过ajax去后台加载数据
所谓的动态页面就是有部分数据是需要通过ajax从后台加载数据进行渲染的
衍生:静态资源 –> js,css,html,jpg,png…
1.
15、静态资源服务器
我们在使用apache的时候会发现，如果我们把各种静态资源放进去就可以访问，apache是一个静态资源服务器，常见的静态资源服务器还有http-server等
1.
16、art-template的用法
<script id="test" type="text/html">
<h1>前端资料</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}
</ul>
</script>
var data = {
title: '标签',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
简写方式
<script id="test" type="text/html">
<h1>前端资料</h1>
<ul>
{{each list}}
<li>索引 {{$index + 1}} ：{{$value}}</li>
{{/each}}
</ul>
</script>
17、网站图标的问题
如果大家平时遇到了这个问题，可以直接忽略掉
- 18、网站的内容没有加载完，会是什么情况？
不停的转圈
1.
19、url的组成